<!DOCTYPE html>
<html>
<head lang="en">
    <title>成长计划</title>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/swiper-3.3.1.min.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/jquery-ui-1.9.2.custom.min.css"/>
    <script src="../js/angular-1.4.6.min.js"></script>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="../js/layer.js"></script>
    <script src="../js/jquery-ui-1.9.2.custom.min.js"></script>
    <style>
        .banner{height: 325px;background-color: #fdb3d4;}
        .banner .container{height: 325px;}
        .banner .fr .h1{font-size: 50px; color: #fff;margin: 40px 0 10px;display: block;}
        .banner .fr .h2{font-size: 16px;color: #ffffff;}
        .banner .fr a{display: block;padding: 10px 20px;width: 200px;border-radius: 5px;margin-top: 40px;}
        .banner .fr a b{display: block;margin-bottom: 10px;}
        .banner .fr a i{font-style: normal;font-family: "宋体";font-size: 24px;font-weight: bold;margin-left: 60px;margin-top: 15px;}

        .content{padding: 15px 0;}
        .content .words{width: 450px;margin-top: 90px;}
        .content .words b{font-size: 40px;}
        .content .words p{font-size: 18px;margin-top: 20px;}

        .bottom-guarantee{margin-top: 0;}
        .bottom-btn{padding: 30px 0;background-color: #fdb3d4;}
        .bottom-btn a{display: block;padding: 10px 20px;width: 200px;border-radius: 10px;margin: 0 auto;}
        .bottom-btn a b{display: block;margin-bottom: 10px;}
        .bottom-btn a i{font-style: normal;font-family: "宋体";font-size: 24px;font-weight: bold;margin-left: 60px;margin-top: 15px;}

        #modal{display: none;}
        .modal{background-color: #fff;}
        .modal .modal-inner{width: 410px;margin: 0 auto;}
        .modal .modal-inner ul li{overflow: hidden;line-height: 36px;margin-bottom: 25px;}
        .modal .modal-inner ul li .name{width: 60px;text-align: right;margin-right: 10px;line-height: 38px;}
        .modal .modal-inner ul li .input{width: 315px;height: 38px;}
        .modal .modal-inner ul li .input label{width: 100px;display: inline-block;text-align: center;border: 1px solid #fa81ac;}
        .modal .modal-inner ul li .input input[type=text]{display: block;width: 100%;height: 36px;border: 1px solid #c9c9c9;text-indent: 15px;}
        .modal .modal-inner ul li .input select{display: block;width: 100%;height: 36px;border: 1px solid #c9c9c9;text-indent: 15px;}
        .modal .modal-inner ul li .input span{position: absolute;right: 5px;top: 0;color: #666;line-height: 38px;}
        .modal .modal-inner .btn{width: 200px;height: 50px;line-height: 50px;text-align: center;border-radius: 4px;margin: 0 auto;}
    </style>
</head>
<body ng-app="">

<div ng-include="'../public/header.html'"></div>

<div class="banner container-full">
    <div class="container clear">
        <img class="fl img" src="../img/QQ截图20160801094941.png" alt=""/>
        <div class="fr">
            <b class="h1">成长计划</b>
            <p class="h2">一站式满足多维家庭育儿需求</p>
            <a href="javascript:void(0);" class="b-white red overflow add-info">
                <span class="fl fs-16">
                    <b class="fs-20">添加宝贝信息</b>开启陪伴之旅
                </span>
                <i class="fl">&gt;</i>
            </a>
        </div>
    </div>
</div>
<div class="container-full">
    <div class="container content overflow">
        <img class="fl" src="../img/QQ截图20160801095101.png" alt=""/>
        <div class="fr words red">
            <b>懂的，让成长更有爱</b>
            <p>是傻大姐打击，撒带哦家大卫芬，是啊SaaS，的地方都是大，如果故事故事大厦。</p>
        </div>
    </div>
</div>
<div class="container-full" style="background-color: #f5f5f5;">
    <div class="container content overflow">
        <img class="fr" src="../img/QQ截图20160801095130.png" alt=""/>
        <div class="fl words red">
            <b>懂的，让成长更有爱</b>
            <p>是傻大姐打击，撒带哦家大卫芬，是啊SaaS，的地方都是大，如果故事故事大厦。</p>
        </div>
    </div>
</div>
<div class="container-full">
    <div class="container content overflow">
        <img class="fl" src="../img/QQ截图20160801095156.png" alt=""/>
        <div class="fr words red">
            <b>懂的，让成长更有爱</b>
            <p>是傻大姐打击，撒带哦家大卫芬，是啊SaaS，的地方都是大，如果故事故事大厦。</p>
        </div>
    </div>
</div>
<div class="container-full" style="background-color: #f5f5f5;">
    <div class="container content overflow">
        <img class="fr" src="../img/QQ截图20160801095226.png" alt=""/>
        <div class="fl words red">
            <b>懂的，让成长更有爱</b>
            <p>是傻大姐打击，撒带哦家大卫芬，是啊SaaS，的地方都是大，如果故事故事大厦。</p>
        </div>
    </div>
</div>
<div class="container-full bottom-btn">
    <a href="javascript:void(0);" class="b-white red overflow add-info">
                <span class="fl fs-16">
                    <b class="fs-20">添加宝贝信息</b>开启陪伴之旅
                </span>
        <i class="fl">&gt;</i>
    </a>
</div>
<div ng-include="'../public/footer.html'"></div>
<!--部件-->
<div ng-include="'../public/right_bar.html'"></div>

<!--弹出框-->
<div id="modal">
    <div class="modal">
        <div class="modal-inner">
            <ul>
                <li>
                    <p class="name fl"><span class="red fs-20 vertical-m">*</span>性别：</p>
                    <div class="input fl">
                        <label>
                            <input class="vertical-m" type="radio" name="sex"/> 男孩
                        </label>
                        <label>
                            <input class="vertical-m" type="radio" name="sex"/> 女孩
                        </label>
                        <label>
                            <input class="vertical-m" type="radio" name="sex"/> 怀孕中
                        </label>
                    </div>
                </li>
                <li>
                    <p class="name fl"><span class="red fs-20 vertical-m">*</span>生日：</p>
                    <div class="input fl">
                        <input type="text" class="datepicker"/>
                    </div>
                </li>
                <li>
                    <p class="name fl"><span class="red fs-20 vertical-m">*</span>昵称：</p>
                    <div class="input fl">
                        <input type="text"/>
                    </div>
                </li>
                <li>
                    <p class="name fl">学龄：</p>
                    <div class="input fl">
                        <select>
                            <option value="">学龄前</option>
                            <option value="">学龄前</option>
                            <option value="">学龄前</option>
                            <option value="">学龄前</option>
                        </select>
                    </div>
                </li>
                <li>
                    <p class="name fl">身高：</p>
                    <div class="input fl">
                        <input type="text"/>
                        <span>CM</span>
                    </div>
                </li>
                <li>
                    <p class="name fl">体重：</p>
                    <div class="input fl">
                        <input type="text"/>
                        <span>KG</span>
                    </div>
                </li>
            </ul>
            <div class="btn white b-red">创建宝贝档案</div>
        </div>
    </div>
</div>
</body>
<script src="../js/common.js"></script>
<script>
    var nav = setTimeout(function(){
        $('.header-nav ul li').eq(1).find('a').addClass('nav-active')
    },0);
    $(function(){
        $('.add-info').click(function(){
            layer.open({
                title:'填写你的宝宝档案',
                area:['600px','auto'],
                content:$('#modal').html(),
                btn:0
            })
        });
        $(".datepicker").datepicker();
    })
</script>
</html>